import React, { useState, useEffect } from "react";
import { useLocation } from 'react-router-dom';
import styles from "./detail.module.css";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { Button, Table } from 'antd';
import PurchaseBtn from "../../../components/Purchase/PurchaseBtn/PurchaseBtn";
import { AntDelBtnModal } from "../../../components/Purchase/AntModal";

const Index = () => {
  let location = useLocation();
  let navigate = useNavigate();
  // const id = location.state.id;

  let [basicInfo, setBasicInfo] = useState([]);
  let [receiveInfo, setReceiveInfo] = useState([]);
  let [ticketInfo, setTicketInfo] = useState([]);

  // 商品信息数据
  let [goodsData, setGoodsData] = useState([]);

  // 附件管理数据
  let [appendixData, setAppendixData] = useState([]);

  // 商品信息表格头
  const tableColumns = [
    {
      title: "商品名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "规格",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "数量",
      dataIndex: "count",
      key: "count",
    },
    {
      title: "单价",
      dataIndex: "price",
      key: "price",
    },
    {
      title: "优惠金额",
      dataIndex: "sellprice",
      key: "sellprice",
    },
    {
      title: "合计金额",
      dataIndex: "total",
      key: "total",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            {/* <AntDelBtnModal id={record} fn={delData}></AntDelBtnModal> */}
          </>
        );
      },
    },
  ];

  // 附件管理表格头
  const tableColumns2 = [
    {
      title: "附件名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "上传时间",
      dataIndex: "uploadTime",
      key: "uploadTime",
    },
    {
      title: "附件格式",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "附件大小",
      dataIndex: "appendixCount",
      key: "appendixCount",
    },
    {
      title: "上传人员",
      dataIndex: "uploadPeople",
      key: "uploadPeople",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            
          </>
        );
      },
    },
  ];

  // 返回上一页
  const backPrePage = () => {
    navigate("/order/list");
  };

  return (
    <>
      <div className={styles.PageTitle}>
        <div className={styles.PageTitle_left}>创建订单</div>
        <div className={styles.PageTitle_right}>
          <PurchaseBtn BtnType="primary" fn={backPrePage}>
            返回
          </PurchaseBtn>
        </div>
      </div>
      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 基础信息</span>
        </div>

        <div>
          <span className={styles.infotitle}>供应商名称</span>
          <span className={styles.infoitem}>{basicInfo.SupplierName}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 收货信息</span>
        </div>

        <div className={styles.info}>
          <span className={styles.infotitle}>收货人</span>
          <span className={styles.infoitem}>{receiveInfo.name}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货地址</span>
          <span className={styles.infoitem}>{receiveInfo.address}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货手机</span>
          <span className={styles.infoitem}>{receiveInfo.phone}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货电话</span>
          <span className={styles.infoitem}>{receiveInfo.tel}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 开票信息</span>
        </div>

        <div className={styles.info}>
          <span className={styles.infotitle}>是否开票</span>
          <span className={styles.infoitem}>{ticketInfo.need}</span>
        </div>
        <div>
          <span className={styles.infotitle}>发票类型</span>
          <span className={styles.infoitem}>{ticketInfo.type}</span>
        </div>
        <div>
          <span className={styles.infotitle}>税号</span>
          <span className={styles.infoitem}>{ticketInfo.taxnum}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 商品信息</span>
        </div>
        <Table columns={tableColumns} dataSource={goodsData} />
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 附件管理</span>
        </div>
        <Table columns={tableColumns2} dataSource={appendixData} />
      </div>
    </>
  );
};

export default Index;